<template>
  <div class="login-container bg-f" style="height: 100vh;position: relative;">
    <div class="" style="height: 175px;width: 100%;">
      <img src="../../assets/newlogin/bg2x.png">
    </div>
    <div class="bg-f"
      :style="`height:${height-175}px;width:100%;margin-top:-27px;position: absolute;border-radius: 30px 30px 0px 0px;padding:0px 20px`">
      <div class="" style="margin-top: 40px;">
        <div class="" style="margin-bottom: 13px;font-size: 14px;font-weight: 500;font-family: auto;color: #BBBBBB;">
          账号
        </div>
        <div class="flex-align" style="height: 51px;background: #F2F2F4; border-radius: 10px;">
          <input type="number" v-model="loginForm.username"
            style="outline:none;border:0px;background: #F2F2F4;padding-left: 10px;width:100%" placeholder="请输入账号" />
        </div>
      </div>
      <div class="" style="margin-top: 30px;">
        <div class="" style="margin-bottom: 13px;font-size: 14px;font-weight: 500;font-family: auto;color: #BBBBBB;">
          密码
        </div>
        <div class="flex-space flex-c" style="height: 51px;background: #F2F2F4; border-radius: 10px;">
          <!-- :type="eaey==true ? 'password' : 'text'" -->
          <input :type="pass" v-model="loginForm.password"
            style="outline:none;border:0px;background: #F2F2F4;padding-left: 10px;width:100%" placeholder="请输入密码" />
          <span id="" @click="easy">
            <img style="width: 21px;height:13px;margin-right: 20px;" src="../../assets/newlogin/invisible2x.png"
              v-if="eaey">
            <img style="width: 21px;height:13px;margin-right: 20px;" src="../../assets/newlogin/so2x.png" v-else>
          </span>
        </div>
      </div>
      <div class="flex-c" style="margin-top: 22px;font-size: 19px;font-weight: bold;font-family: auto;color: #FFFFFF;background: #0580FF;padding: 21px  0px;
border-radius: 10px;" @click="handleLogin">
        登录账户
      </div>
    </div>
  </div>
</template>
<script>
  import {
    Toast
  } from 'vant';
  import {
    Login
  } from '@/api/login/Login.js';
  export default {
    name: "Login",
    data() {
      return {
        eaey: true,
        pass: 'Password',
        loginForm: {
          username: "",
          password: ""
        },

        loading: false,
        height: 100,
        // redirect: undefined,
      };

    },
    mounted() {
      this.client() //获取高度
    },
    created() {
      this.add()
    },

    // watch: {
    // 	$route: {
    // 		handler: (route) => {
    // 			this.redirect = route.query && route.query.redirect;
    // 		},
    // 		immediate: true,
    // 	},
    // },
    methods: {
      easy() {
        this.eaey = !this.eaey;
        if (this.eaey) {
          this.pass = 'password'
        } else {
          this.pass = 'text'
        }
      },
      client() {
        this.$nextTick(() => {
          this.height = document.body.clientHeight
        })
      },
      add() {
        console.log(process.env.VUE_APP_Id)
      },
      handleLogin() {
        if (this.loginForm.username && this.loginForm.password) {
          const toastloding = Toast.loading({
            message: '登录中111...',
            forbidClick: true,
          });
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then((res) => {
              // const toastloding = Toast.loading({
              //   message: '登录中...',
              //   forbidClick: true,
              // });
              toastloding.clear(); //关闭提示加载
              // 登录之后不进入首页
              // Login({
              // 	"postdata": [{
              // 		"field": "phone",
              // 		"value": res.data
              // 	}]
              // }).then(res => {
              // 	console.log(res, '登录之后')
              // })
              this.$router.push("/");
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          Toast('账号或密码为空')
        }
      },
    },
  };
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
  // 背景改白色
  $bg: #fff;
  $light_gray: #fff;
  $cursor: #fff;
</style>

<style lang="scss" scoped>
  // 背景改白色
  $bg: #f7f8fa;
  $dark_gray: #889aa4;
  $light_gray: #eee;

  .bg-f {
    border-radius: 5px;
    background-color: #FFFFFF;
  }

  // .login-container {
  // 	min-height: 100%;
  // 	width: 100%;
  // 	background-color: $bg;
  // 	overflow: hidden;

  // 	.login-form {
  // 		position: relative;
  // 		width: 520px;
  // 		max-width: 100%;
  // 		padding: 160px 35px 0;
  // 		margin: 0 auto;
  // 		overflow: hidden;
  // 	}

  // 	.tips {
  // 		font-size: 14px;
  // 		color: #fff;
  // 		margin-bottom: 10px;

  // 		span {
  // 			&:first-of-type {
  // 				margin-right: 16px;
  // 			}
  // 		}
  // 	}

  // 	.svg-container {
  // 		padding: 6px 5px 6px 15px;
  // 		color: $dark_gray;
  // 		vertical-align: middle;
  // 		width: 30px;
  // 		display: inline-block;
  // 	}

  // 	.title-container {
  // 		position: relative;

  // 		.title {
  // 			font-size: 26px;
  // 			color: $light_gray;
  // 			margin: 0px auto 40px auto;
  // 			text-align: center;
  // 			font-weight: bold;
  // 		}
  // 	}

  // 	.show-pwd {
  // 		position: absolute;
  // 		right: 10px;
  // 		top: 7px;
  // 		font-size: 16px;
  // 		color: $dark_gray;
  // 		cursor: pointer;
  // 		user-select: none;
  // 	}
  // }
</style>
